<template>
	<a-card :bordered="false">
		<div
			v-for="item in dbsList"
			:key="item.dbsId"
			:class="[
				'item',
				'snowy-shadow',
				roundedCornerStyleOpen ? 'snowy-shadow-round' : '',
				selectDbsId === item.dbsId ? 'item-selected' : ''
			]"
			@click="selectDbs(item)"
		>
			<a-row :gutter="10">
				<a-col :span="12">
					<div class="snowy-ellipsis">
						<a-space>
							<span style="font-size: 18px">{{ item.dbsName }}</span>
						</a-space>
					</div>
				</a-col>
				<a-col :span="12">
					<div class="snowy-ellipsis snowy-flex-end">
						{{ $TOOL.dictTypeData('DATABASE_DRIVE_TYPE', item.dbsType) }}
					</div>
				</a-col>
			</a-row>
		</div>
		<a-empty v-if="dbsList.length === 0" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
	</a-card>
</template>
<script setup>
	import { Empty } from 'ant-design-vue'
	import dbApi from '@/api/dev/dmApi'
	import { globalStore } from '@/store'
	const store = globalStore()
	const emits = defineEmits(['selectDbs'])
	// 数据库表
	const dbsList = ref([])
	const selectDbsId = ref('')
	// 获取数据源
	const getDbList = () => {
		dbApi.dbInfoList().then((data) => {
			dbsList.value = data.map((item) => {
				return {
					dbsId: item['id'],
					dbsName: item['poolName'],
					dbsType: item['driverName']
				}
			})
			// 默认打开第一个
			nextTick(() => {
				selectDbs(dbsList.value[0])
			})
		})
	}
	getDbList()
	// 获取数据库表
	const selectDbs = (val) => {
		selectDbsId.value = val.dbsId
		emits('selectDbs', val)
	}
	// 圆角风格
	const roundedCornerStyleOpen = computed(() => {
		return store.roundedCornerStyleOpen
	})
</script>
<style scoped>
	.snowy-shadow {
		background-color: var(--card-above-color);
		box-shadow: 0 1px 1px var(--card-above-border-color);
		border-radius: 2px;
	}
	/** 圆角风格 **/
	.snowy-shadow-round {
		border-radius: 6px;
	}
	.snowy-shadow:hover {
		cursor: pointer;
	}
	.snowy-ellipsis {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.snowy-flex-end {
		display: flex;
		justify-content: flex-end;
		width: 100%;
		align-items: center;
		height: 100%;
	}
	.item {
		margin-bottom: 10px;
		padding: 8px 12px;
	}
	/** 被选中后 **/
	.item-selected {
		box-shadow: 1px 2px 3px var(--primary-color);
	}
	.item:hover {
		box-shadow: 1px 2px 3px var(--primary-color);
	}
</style>
